import React from 'react'
import {  Form, Input, DatePicker, Button } from 'antd'
import 'dayjs/locale/zh-cn';
import locale from 'antd/es/date-picker/locale/zh_CN';
type SearchFunc = {
  (searchParams: {keyWords?: string,start?:string,end?: string}): void
}
type Props = {
  onSearch: SearchFunc
}
export default function SearchBar(props: Props) {
  return (
    <Form onFinish={
      (params: any) => {
        props.onSearch({
          keyWords: params.keyWords,
          start: params.time[0]? params.time[0].format('YYYY-MM-DD'): '',
          end: params.time[1]? params.time[1].format('YYYY-MM-DD'): '',
        })
      }
    } layout='inline'>
        <Form.Item name="keyWords" label="关键字">
          <Input/>
        </Form.Item>
        <Form.Item name="time" label="时间">
          <DatePicker.RangePicker locale={locale} format="YYYY/MM/DD" placeholder={['开始','结束']} separator="至"/>
        </Form.Item>
        <Form.Item>
            <Button htmlType='submit'>提交</Button>
        </Form.Item>
      </Form>
  )
}
